<%@ include file="view/en/header.tpl.jsp" %>

<style type="text/css">
@import url('css/about.css');
</style>

<div id="content">
    <div class="rotator">
        <ul id="rotmenu">
            <li>
                <a href="rot1">Peiliang Zhang</a>
                <div style="display:none;">
                    <div class="info_image">1.jpg</div>
                    <div class="info_heading">Satoshi Takashiro</div>
                    <div class="info_description">
                    	<p>Amazing! I'm listed here~ I love anime, languages(or linguistics perhaps?) and computer science, care little about politics and history.</p>
                        <p>I'm here responsible for the basic javascript and java codes. Occasionally do some UI stuff~ Just feel free to contact me~</p>
                        <a href="mailto:takashiro@qq.com" class="more">takashiro@qq.com</a>
                    </div>
                </div>
            </li>
            <li>
                <a href="rot2">Dingkang Li</a>
                <div style="display:none;">
                    <div class="info_image">2.jpg</div>
                    <div class="info_heading">IKU ZO! GENJI!</div>
                    <div class="info_description">
                    	
                        <a href="mailto:dingkang1743@gmail.com" class="more">dingkang1743@gmail.com</a>
                    </div>
                </div>
            </li>
            <li>
                <a href="rot3">Huan Zhou</a>
                <div style="display:none;">
                    <div class="info_image">3.jpg</div>
                    <div class="info_heading">KAIZOKUOU NI NARU!</div>
                    <div class="info_description">
			 At vero eos et accusamus et iusto odio
			dignissimos ducimus qui blanditiis praesentium
			voluptatum deleniti atque corrupti quos dolores et
			quas molestias excepturi sint occaecati cupiditate
			non provident...
                        <a href="mailto:zhouhuan1992@gmail.com" class="more">zhouhuan1992@gmail.com</a>
                    </div>
                </div>
            </li>
            <li>
                <a href="rot4">Source Code</a>
                <div style="display:none;">
                    <div class="info_image">4.jpg</div>
                    <div class="info_heading">We are always here</div>
                    <div class="info_description">
                    	<p>We've been actively updating our source codes and fixing all sorts of defected problems in Google Code(the link below), with git as the version controller. Before you post a bug or a new function, just search for old possibly-related issues in case of a duplicated new one.</p> 
			 			<a href="http://code.google.com/p/plus-quiz/" class="more">Google Code</a>
                    </div>
                </div>
            </li>
        </ul>
        <div id="rot1">
            <img src="" width="800" height="300" class="bg" alt=""/>
            <div class="heading">
                <h1></h1>
            </div>
            <div class="description">
                <p></p>

            </div>    
        </div>
    </div>
</div>

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
    $(function() {
        var current = 1;
        
        var iterate		= function(){
            var i = parseInt(current+1);
            var lis = $('#rotmenu').children('li').size();
            if(i>lis) i = 1;
            display($('#rotmenu li:nth-child('+i+')'));
        }
        display($('#rotmenu li:first'));
        var slidetime = setInterval(iterate,3000);

        $('#rotmenu li').bind('click',function(e){
            clearTimeout(slidetime);
            display($(this));
            e.preventDefault();
        });

        function display(elem){
            var $this 	= elem;
            var repeat 	= false;
            if(current == parseInt($this.index() + 1))
                repeat = true;

            if(!repeat)
                $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
                    $(this).animate({'opacity':'0.7'},700);
                });

            current = parseInt($this.index() + 1);

            var elem = $('a',$this);
            
                elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);

            var info_elem = elem.next();
            $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
                $('h1',$(this)).html(info_elem.find('.info_heading').html());
                $(this).animate({'left':'0px'},400,'easeInOutQuad');
            });

            $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
                $('p',$(this)).html(info_elem.find('.info_description').html());
                $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
            })
            $('#rot1').prepend(
            $('<img/>',{
                style	:	'opacity:0',
                className : 'bg'
            }).load(
            function(){
                $(this).animate({'opacity':'1'},600);
                $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
                    $(this).remove();
                });
            }
        ).attr('src','image/'+info_elem.find('.info_image').html()).attr('width','800').attr('height','300')
        );
        }
    });
</script>
<%@include file="view/en/footer.tpl.jsp"%> 